<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: younghxp
 * @Date: 2022-05-16 15:53:51
 * @LastEditors: younghxp
 * @LastEditTime: 2022-05-16 16:16:12
-->
<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script>
import common from './kits/common.js'

export default {
  name: 'App',
  provide() {
    return {
      reload: this.reload,
    }
  },
  components: {},
  data() {
    return {
      isRouterAlive: true,
    }
  },
  computed: {
    keepAlive() {
      return this.$store.getters.keepAlive
    },
  },
  methods: {
    //重载当前页面
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    },
  },
  created() {
    //在页面刷新时将vuex里的信息保存到localStorage里
    window.addEventListener('beforeunload', () => {
      localStorage.setItem('messageStore', JSON.stringify(this.$store.state))
    })

    //在页面加载时读取localStorage里的状态信息
    localStorage.getItem('messageStore') &&
      this.$store.replaceState(
        Object.assign(
          this.$store.state,
          JSON.parse(localStorage.getItem('messageStore'))
        )
      )
    this.$nextTick(function () {
      document.title = this.$store.state.areaInfoArr.mainTopText
        ? this.$store.state.areaInfoArr.mainTopText
        : ''
    })
  },
  mounted() {
    //系统title
    // document.title= this.$store.state.areaInfoArr.mainTopText;
    // 检测浏览器路由改变页面不刷新问题,hash模式的工作原理是hashchange事件
    window.addEventListener(
      'hashchange',
      () => {
        let currentPath = window.location.hash.slice(1)
        if (this.$route.path !== currentPath) {
          this.$router.push(currentPath)
        }
      },
      false
    )
  },
  beforeDestroy() {
    //清除tab栏数据
    this.$store.state.sliderBar = []
    this.$store.state.keekAlives = []
    localStorage.removeItem('sliderBar')
  },
}
</script>

<style>
.el-header {
  background-color: #eee;
}
</style>
